<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>学生成绩显示页面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css">
    <style>
        body {
            background-color: #f2f3f5;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            padding: 20px;
        }

        .table-container {
            width: 980px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.1);
            padding: 20px;
        }

        .title {
            font-size: 22px;
            color: #333;
            font-weight: bold;
            margin: 0 0 20px 20px;
        }

        .pass-tag {
            display: inline-block;
            padding: 0 10px;
            height: 28px;
            line-height: 28px;
            border-radius: 4px;
            color: #fff;
            font-size: 12px;
            text-align: center;
        }

        .pass {
            background-color: #67c23a;
        }

        .fail {
            background-color: #f56c6c;
        }
    </style>
</head>
<body>
<div class="table-container">
    <p class="title" id="usernameTitle">我的分数</p>

    <table class="layui-table" id="scoreTable">
        <thead>
        <tr>
            <th>考试日期</th>
            <th>课程名称</th>
            <th>考试分数</th>
            <th>是否及格</th>
        </tr>
        </thead>
        <tbody id="scoreBody">
        <!-- 动态插入 -->
        </tbody>
    </table>

    <div class="pagination" id="pagination"></div>
</div>

<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['laypage', 'layer'], function(){
        var laypage = layui.laypage;
        var layer = layui.layer;

        // 从 localStorage 获取学生信息
        const userStr = localStorage.getItem('user');
        if (!userStr) {
            layer.msg("请先登录");
            return;
        }

        const user = JSON.parse(userStr);
        const studentId = user.studentId;
        const username = user.studentName || user.name || "学生";

        // 设置标题
        document.getElementById("usernameTitle").innerText = `${username} 的成绩`;

        // 分页参数
        let pagination = {
            current: 1,
            size: 6,
            total: 0
        };

        // 加载成绩数据
        function loadScores(page = 1) {
            pagination.current = page;

            fetch(`/score/${page}/${pagination.size}/${studentId}`)
                .then(res => res.json())
                .then(data => {
                    if (data.code === 200) {
                        const records = data.data.records || [];
                        pagination.total = data.data.total;
                        renderTable(records);
                        renderPagination();
                    } else {
                        layer.msg("成绩加载失败: " + data.message);
                    }
                })
                .catch(err => {
                    console.error("成绩加载错误：", err);
                    layer.msg("请求出错，请稍后重试");
                });
        }

        // 渲染表格
        function renderTable(data) {
            const tbody = document.getElementById('scoreBody');
            tbody.innerHTML = '';

            data.forEach(item => {
                const isPass = item.etScore >= 60;
                const tagClass = isPass ? 'pass' : 'fail';
                const tagText = isPass ? '及格' : '不及格';

                const row = `
                    <tr>
                        <td>${item.answerDate}</td>
                        <td>${item.subject}</td>
                        <td>${item.etScore}</td>
                        <td><span class="pass-tag ${tagClass}">${tagText}</span></td>
                    </tr>
                `;
                tbody.innerHTML += row;
            });
        }

        // 渲染分页
        function renderPagination() {
            laypage.render({
                elem: 'pagination',
                count: pagination.total,
                limit: pagination.size,
                curr: pagination.current,
                layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                limits: [4, 6, 8, 10],
                jump: function(obj, first){
                    if (!first) {
                        pagination.size = obj.limit;
                        loadScores(obj.curr);
                    }
                }
            });
        }

        // 初次加载
        loadScores();
    });
</script>
</body>
</html>
